<template>
    <div>
        <h1>门店显示</h1>
        门店名称 <input type="text" v-model="info.names">
        商户地址<select v-model="info.addres">
                    <option value="">请选择</option>
                    <option  v-for="itme in lise.a"> {{ itme.Name }}</option>
                </select>
        <input type='button' value="查询" class="btn btn-primary" @click="getlister">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>门店名称</td>
                    <td>商户地址</td>
                    <td>门店图片</td>
                    <td>客服电话</td>
                    <td>门店状态</td>
                    <td>门店介绍</td>
                    <td>入住须知</td>
                    <td>交通信息</td>
                    <td>操作</td>

                </tr>

                <tr v-for="itme in data.list":key="itme.Id">
                    <td>{{ itme.Id }}</td>
                    <td>{{ itme.ShopName }}</td>
                    <td>{{ itme.ShopAddres }}</td>
                    <td><img :src="itme.Img" width="50" height="50"></td>
                    <td>{{ itme.Phone }}</td>
                    <td>{{ itme.State }}</td>
                    <td>{{ itme.ShopJS }}</td>
                    <td>{{ itme.ShopRZXZ }}</td>
                    <td>{{ itme.JTXX }}</td>
                    <td>  <input type="button" value="删除" @click="del(itme.Id)"></td>

                </tr>

            </tbody>
        </table>
        <span><b>共{{ data.totalcount }}条</b></span>
        <span><b>每页{{ info.pagesize }}条</b></span>
        <span><b>共{{ info.pageIndex }}/{{ data.totalpage }}页</b></span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageIndex-1)">
        <span v-for="itme in data.totalpage"@click="gopage(itme)">
        {{ itme }}
        </span>
        <input type="button" value="下一页" @click="gopage(info.pageIndex+1)">
        <input type="button" value="尾页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pageIndex">
        <input type="button" value="跳转" @click="gopage(info.pageIndex)">
        <select v-model="info.pagesize" @change="show">
            <option :value="itme" v-for="itme in arr">每页{{ itme }}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
import router from '@/router';
const rouder=useRouter();
let info:any=reactive({
    pageIndex:1,
    pagesize:2,
    names:'',
    addres:''
})

let arr:any=ref([2,4,6,8,10])
let data:any=reactive({
    list:[],
    totalcount:0,
    totalpage:0
})


let lise:any=reactive({
    a:[]
})
onMounted(()=>{
    getlist();
    getlister();
})
const getlister=()=>{
    axios({
        url:'/api/Shop/GetShow',
        method:'get',
        params:info
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data)
    })
    .catch((err)=>{
        console.log(err);
        
    })

}
const getlist=()=>{
    axios({
        url:'/api/Shop/GetShop',
        method:'get'
    })
    .then((res)=>{
        console.log(res);
        lise.a=res.data;
    })
    .catch((err)=>{
        console.log(err);
        
    })

}

const show=()=>{
    info.pageIndex=1;
    getlister();
}
const gopage=(num:any)=>{
    if(num<1)
{
    info.pageIndex=1;
    return;

}
if(num>data.totalpage)
{
    info.pageIndex>data.totalpage;
    return;
}
info.pageIndex=num;
    getlister();
};


const del=(id:any)=>{
    let f=confirm("确定删除吗？")
    if(f)
{
    axios({
        url:'/api/Shop/Del',
        method:'delete',
        params:{id:id}
    })
    .then((res)=>{
        console.log(res);
         if(res.data>0)
    {
        alert('删除成功');
        getlister();
        return;
    }
    else
    {
        alert('删除失败');
        return;
    }
        
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
    
}


</script>

<style scoped>
span{
    margin: 0 5px;
}
</style>